<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utg-8">
<title>Insert title here</title>
</head>
<body>
<div class="panel panel-info" id="price">

    <div class="panel-heading">
        <h3 class="panel-title">入库统计，确认单价</h3>
    </div>
    
    <div class="panel-body">
    <div class="well well-lg">供应商：{{supplier}}</div>
			<table id="medicine_price_table">
			</table>
	</div>
	
	<div class="pull-right">
	<button type="button" class="btn btn-info" @click="back">返回</button>
		<button type="button" class="btn btn-info" @click="submit">提交</button>
	</div>
	
</div>


    

</body>
<script type="text/javascript">
	var sumStorageData = [];
	for(var i=0; i<storageData.length; i++){
		for(var j=0; j<sumStorageData.length; j++){
			if(sumStorageData[j].medicineId == storageData[i].medicineId){
				sumStorageData[j].num ++;
				break;
			}		
		}
		if(j >= sumStorageData.length){
			sumStorageData.push({
				id:sumStorageData.length+1,
				medicineName:storageData[i].medicineName,
				num:1,
				price:0,
				medicineId:storageData[i].medicineId
			});
		}
	}
	new Vue({
		el:'#price',
		data:{
			supplier:supplierName,
			supplierId:supplierId
		},
		methods:{
			back: function(){
				showMedicineStorage();
			},
			submit: function() {
				for (let j = 0; j < sumStorageData.length; j++) {
					delete sumStorageData[j].medicineName;
					delete sumStorageData[j].num;
					delete sumStorageData[j].id;
				}
				var submitData = {
					storageItems:storageData,
					storagePrices:sumStorageData,
				};
				if(confirm("提交之前记得确定好单价，是否提交？")){
				
				$.ajax({
    				url:'<%=request.getContextPath()%>/ms/save/'+employee.id+'/'+this.supplierId,
    				type:"post",
    				contentType:"application/json",
    				data:JSON.stringify(submitData),
    				success:function(){
    					
    					speak('提交成功');
    					storageData = [];
    					showMedicineStorage();
    				}
    			});
				}
			}
		}
	});
	
	
	$("#medicine_price_table").bootstrapTable({ // 对应table标签的id
	  method:"get",
      url: "<%=request.getContextPath()%>/m/nothing", // 获取表格数据的url
      cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
      striped: true,  //表格显示条纹，默认为false
      pagination: true, // 在表格底部显示分页组件，默认false
      pageList: [10, 20,50,100], // 设置页面可以显示的数据条数
      pageSize: 20, // 页面数据条数
      pageNumber: 1, // 首页页码
      sidePagination: 'client', // 设置为服务器端分页
      columns: [
           {
              field: 'id', // 返回json数据中的name
              title: 'Id', // 表格表头显示文字
              align: 'center', // 左右居中
              valign: 'middle'// 上下居中
              
          },{
              field: 'medicineName',
              title: '药品名称',
              align: 'center',
              valign: 'middle'
          },{
              field: 'num', // 返回json数据中的name
              title: '数量/箱', // 表格表头显示文字
              align: 'center', // 左右居中
              valign: 'middle'// 上下居中
          },
          {
          	  field: 'price',
              title: "单价",
              align: 'center',
              valign: 'middle',
			  editable:{
              	type:"text",
              	title:"单价",
              	validate:function(v){
              		if(!v) return "输入不能为空";
              		if(v.replace(/\D/g, '').length != v.replace('.','').length){
              			return "请输入一个合法的数字";
              		}
              		if(v.split(".").length > 2){
              			return "请输入一个合法的数字";
              		}
              		if(v.startsWith("0")){
              			return "请输入一个合法的数字";
              		}
              	}
              }
          }
      ],
      responseHandler:function (res) {
                return sumStorageData;
      },
      onEditableSave: function (field, row, oldValue, $el) {
      		
      },
	});
</script>
</html>